<template>
    <div class='dialog'>
        <div class='newAdd dialog-con addCompanyInfo'>
            <split-vertical title="新增公司信息"></split-vertical>
            <div class="info">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"  class="demo-ruleForm"   label-position="right">
                    <el-form-item label="公司名称" prop="companyName">
                        <el-input v-model="ruleForm.companyName"></el-input>
                    </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="公司编码" prop="companyCode">
                        <el-input v-model="ruleForm.companyCode"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="法人代表" prop="companyDeputy">
                        <el-input v-model="ruleForm.companyDeputy" style="width: 97%;"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                    <el-form-item label="账号" prop="accountNo">
                        <el-input v-model="ruleForm.accountNo" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行" prop="accountBank">
                        <el-input v-model="ruleForm.accountBank"></el-input>
                    </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="税号" prop="tax">
                        <el-input v-model="ruleForm.tax"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="公司电话" prop="companyMobile">
                        <el-input v-model="ruleForm.companyMobile" style="width:97%"></el-input>
                        <!-- <p style="color:red;font-size:12px;" v-if="show1">*公司电话不正确</p> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                     <el-form-item label="客服电话" prop="artificialMobile">
                        <el-input v-model="ruleForm.artificialMobile"></el-input>
                    </el-form-item>
                    <el-form-item label="我司对公账户名" prop="companyAccountName">
                      <el-input v-model="ruleForm.companyAccountName"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button @click="submitForm('ruleForm')" type="primary" :disabled="isCompanyBtn" size="medium">提交</el-button>
                        <el-button @click="cancel"  size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/SplitVertical"
export default {
    inject:['reload'],
    components:{
      SplitVertical
    },
    data(){
        return{
            //创建按钮是否显示
            isCompanyBtn:false,
            newCompany:[
                {name:'公司名称',val:'必输项'},
                {name:'法人代表',val:'必输项'},
                {name:'我司对公账户名',val:'必输项'},
                {name:'账号',val:'必输项'}
            ],
            name:'',
            imageUrl: '',
            userId:'',
            ruleForm: {
                companyCode:'',//  公司编码
                companyName:'',//  公司名称
                companyDeputy:'',//公司法人代表
                companyAccountName:'',//我司对公账户
                accountBank:'',//开户行
                accountNo:'',//开户行账户
                tax:'',
                companyMobile:'',
                artificialMobile:''
            },
            rules: {
                companyCode: [
                    { required: true, message: '请输入公司编码', trigger: 'blur' },
                    { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                ],
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'change' }
                ],
                companyDeputy: [
                    { required: true, message: '请输入法人代表', trigger: 'change' }
                ],
                companyAccountName: [
                    { required: true, message: '请输入我司对公账户名', trigger: 'change' }
                ],
                accountBank: [
                    { required: true, message: '请输入开户行', trigger: 'change' }
                ],
                accountNo: [
                    { required: true, message: '请输入开户行账户', trigger: 'change' },
                    { min: 5, max: 25, message: '长度在5 到 25 个字符', trigger: 'change' }
                ],
                tax: [
                    { required: true, message: '请输入税号', trigger: 'change' }
                ],
                companyMobile:[
                    { required: true, message: '请输入公司电话', trigger: 'change' },
                    { min: 5, max: 100, message: '输入多个，请以分号隔开,长度5~100之间', trigger: 'change' }
                ],
                artificialMobile:[
                    { required: true, message: '请输入客服电话', trigger: 'change' },
                    { min: 5, max: 100, message: '输入多个，请以分号隔开,长度5~100之间', trigger: 'change' }
                ]
            }
        }
    },
    created(){
       this.userId= localStorage.get("userID")
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.confirm()
            } else {
                return false;
            }
            });
        },
        confirm(){
            let parmas=this.ruleForm
            parmas['userId']=this.userId
            this.isCompanyBtn=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('创建成功')
                    this.isCompanyBtn=false;
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.msg)
                    this.isCompanyBtn=false;
                  
                }
            }
            api.addCompanyInfo(parmas,success)
        },
        cancel(){
            this.$emit('closeDialog')
        },
    }
}
</script>
<style lang="scss" scoped>
.addCompanyInfo{
    width:700px;
    height:530px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
        }
    }
    .el-input{
      width:99%;

    }
  .btn{
    width:100%;
    text-align: center;
  }

    
}
</style>

